<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaBlog</title>
    <base href="/">
    <script src="/js/axios.js/"></script>
    <script src="/js/vue.js"></script>
    <script src="/el/element.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/mystyle.css">
    <link rel="stylesheet" type="text/css" href="/el/element.css"/>

</head>
<body>
<div id="app">
    <div th:replace="~{common/head-index::head}"></div>
    <div style="display: flex;width:auto;margin-top: 50px;">
        <div style="margin-top: 20px;background-color: #bde1f5">
            <h4 style="text-align: center;margin-top: 0px">
                <el-tag style="width: 200px;background-color: #bde1f5">分类专栏</el-tag>
            </h4>
            <ul>
                <li>
                    <a @click="findByType(0)"style="color: #7d808e;font-size: 14px;">
                        <span>查看全部文章</span>
                    </a>
                </li>
                <li v-for="item in types" style="margin: 20px;">
                    <div style="display: flex;justify-content: space-between">
                        <span style="margin-left: -20px;font-size: 14px;"
                             >
                            <a class="hove"  @click="findByType(item.typeid)">
                             {{item.type}}
                            </a>
                        </span>
                        <div>
                            <span style="margin-left: -30px;font-size: 14px;">
                                <a class="hove" @click="findByType(item.typeid)" >
                                  {{item.num}}篇
                                </a>
                            </span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="bodys" style="width: 100vw;">
            <div class="text" v-for="item in blogs">
                <h4 style="background-color: #bde1f5">
                    <a @click="findByConId(item.blog.contentid,item.blog.id)">
                            {{item.blog.title}}
                    </a>
                </h4>
                <span  style="text-indent: 6em">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.blogContent.content}}
                </span>
                <el-link @click="findByConId(item.blog.contentid,item.blog.id)">查看全文<i
                        class="el-icon-view el-icon--right"></i></el-link>
                <br>
                    <div style="text-align: right">
                        <el-tag>浏览量 ： {{item.blog.reding_num}}</el-tag>
                        <el-tag type="success">点赞数量 ： {{item.blog.likes_num}}</el-tag>
                        <el-tag type="info">
                            <img src="img/time.png" style="width: 18px;
        height: 18px;">于 ： {{item.blog.send_time}} 发布
                        </el-tag>
                        <el-tag type="info">
                            <a @click="findByAuthor(item.blog.uid)">
                                作者 ： {{item.blog.author}}
                            </a>
                        </el-tag>
                    </div>
                <hr>
            </div>
                <div style="text-align: center">
                    <el-pagination background :page-size="num"
                                   :hide-on-single-page="total <num"
                                   :current-page="page"
                                   @current-change="change" layout="prev, pager, next" :total="total">
                    </el-pagination>
                </div>
        </div>
    </div>
</div>
</div>

</body>
<script>
    window.eventBus = new Vue();
    var app = new Vue({
        el: "#app",
        data: {
            blogs: [], //全部博文
            isLogin: false,    //判断是否登录
            blog: [],  //当前博文
            types: [], //博文类型
            start: 1,  //起始页
            num: 5,     //数量
            page : 1,
            total: 0,
            value : true,
            user : {

            }
        },
        methods: {
            //换页
            change(index) {
                console.log(index)
                let _this = this
                this.start = index;
                sessionStorage.setItem("homestart",this.start);
                axios.get("/api/public/findByPage/" + this.start + "/ " + this.num).then(function (resp) {
                    // console.log(resp.data.data)
                    _this.blogs = resp.data.data.blogs
                    var reg = /<[^<>]+>/g   //1、全局匹配g肯定忘记写  2、<>标签中不能包含标签实现过滤HTML标签
                    for (let i = 0; i < _this.blogs.length; i++) {
                        var msg = _this.blogs[i].blogContent.content.replace(reg, "")
                        _this.blogs[i].blogContent.content = msg.substring(0, 100) + "...."
                    }
                })
            },
            //根据作者查询博客
            findByAuthor(uid) {
                let _this = this
                axios.get("/api/public/findByAuthor/" + uid).then(function (resp) {
                    _this.blogs = resp.data.data
                    var reg = /<[^<>]+>/g   //1、全局匹配g肯定忘记写  2、<>标签中不能包含标签实现过滤HTML标签
                    for (let i = 0; i < _this.blogs.length; i++) {
                        var msg = _this.blogs[i].blogContent.content.replace(reg, "")
                        _this.blogs[i].blogContent.content = msg.substring(0, 100) + "...."
                    }
                    var length = resp.data.data.length;
                    _this.total = length
                    _this.$message({
                        message: '该作者有 ' + length + " 篇文章",
                        type: 'success'
                    });
                })
            },
            //查看全文
            findByConId(id, blogid) {
                let _this = this;
                this.id = id
                sessionStorage.setItem("id", id)
                sessionStorage.setItem("blogId", blogid)
                    _this.$message({
                        message: '正在跳转，请稍后',//提示的信息
                        type:'success',　　//类型是成功
                        duration:500,　　//显示时间, 毫秒。设为 0 则不会自动关闭，建议1200
                        onClose:()=>{
                            top.location.href = "/api/public/goFindContent";
                        }
                    });
            },
            //根据 类型id 分页查找文章
            findByType(typeid) {
                console.log(typeid);
                let _this = this;
                axios.get("/api/public/findBageByTypeid/"+ _this.start + "/" + _this.num + "/" + typeid).then(function (resp) {
                    // console.log(resp.data.data)
                    _this.blogs = resp.data.data.blogs
                    _this.total = resp.data.data.total
                    if (resp.data.data.blogs.length == 0) {
                        _this.$message({
                            message: '该类型暂无内容 ！！',
                            type: 'danger'
                        });
                        _this.total = 0
                    } else {
                        var reg = /<[^<>]+>/g   //1、全局匹配g肯定忘记写  2、<>标签中不能包含标签实现过滤HTML标签
                        for (let i = 0; i < _this.blogs.length; i++) {
                            // console.log(_this.blogs[i].blogContent.content)
                            var msg = _this.blogs[i].blogContent.content.replace(reg, "")
                            _this.blogs[i].blogContent.content = msg.substring(0, 100) + "...."
                        }
                    }
                })
            },
            outLogin() {
                sessionStorage.clear()
                localStorage.clear()
            }
        },
        mounted() {
            let _this = this;
            var start = sessionStorage.getItem("homestart");
            let _start = parseInt(start)
            console.log(start)
            console.log(_this.page)
            axios.get("/api/public/findAllType").then(function (resp) {
                _this.types = resp.data.data
            })
            // 判断用户是否登录
            axios.get("/api/public/whetherLogin").then(function (resp) {
                _this.isLogin = resp.data.data
            })
            axios.get("/api/public/findByPage/" + _this.start + "/" + _this.num).then(function (resp) {
                // console.log(resp.data.data)
                _this.total = resp.data.data.total
                _this.blogs = resp.data.data.blogs
                var reg = /<[^<>]+>/g   //1、全局匹配g
                //  2、<>标签中不能包含标签实现过滤HTML标签
                console.log(_this.blogs)
                if (_this.blogs !=null){
                    for (let i = 0; i < _this.blogs.length; i++) {
                        var msg = _this.blogs[i].blogContent.content.replace(reg, "")
                        _this.blogs[i].blogContent.content = msg.substring(0, 100) + "...."
                    }
                }
            })

        }
    })
</script>
</html>